<template>
  <div class="approval">
    <el-form :model="detailData" size="mini" label-position="right">
      <el-row :gutter="20">
        <el-col :span="24" class="clue-title" style="display: block">
          项目基本信息
          <span style="font-size: 14px; color: #aaaaaa; margin-left: 10px"
            >项目编号 {{ detailData.projectCode }}</span
          ></el-col
        >
        <el-col :span="12">
          <el-form-item label="企业名称：">{{
            detailData.customerName
          }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业联系人：">
            <span>{{ detailData.contacts }}</span>
            <span style="margin-left: 10px">{{ detailData.telephone }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="业务类型：">{{
            detailData.businessTypeNameList &&
            detailData.businessTypeNameList.length > 0
              ? detailData.businessTypeNameList.toString()
              : ""
          }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所在地区：">{{
            detailData.parentName ? detailData.parentName.join("") : ""
          }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预计合同金额：">
            {{detailData.estimatedAmount}} {{detailData.units}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预计成交日期：">{{
            detailData.estimatedDate
          }}</el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="项目概况：">{{ detailData.note }}</el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-form
      :model="approvalData"
      size="mini"
      label-position="right"
      label-width="110px"
      :rules="rules"
      ref="approvalForm"
      :disabled="readonly"
    >
      <el-row :gutter="20">
        <el-col :span="24" class="clue-title">审批信息填写</el-col>
        <el-col :span="24">
          <el-form-item label="审批类型：" prop="examinationApprovalType">
            <el-radio-group v-model="approvalData.examinationApprovalType" :disabled="isAgain">
              <el-radio
                v-for="(item, index) in examinationApprovalTypeArr"
                :key="index"
                :label="item.value"
                @change="selectExaminationApprovalType(item)"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>
        <!-- 动态更换表单 -->
        <keep-alive>
          <component
            v-if="true"
            ref="form"
            :is="curExaminationApprovalType.form"
            :details="childFormData"
            :readonly="readonly"
          ></component>
        </keep-alive>
        <el-col :span="24">
          <el-form-item label="审批流：" prop="approvalApprovaer">
            <approver
              :typeId="curExaminationApprovalType.typeId"
              :readonly="readonly"
              :approverList="approvalData.approvalApprovaer"
              @handleChooseapprover="handleChooseOpportunitiesApprover"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="抄送：" prop="ccPeopleList">
            <approver
              :typeId="curExaminationApprovalType.typeId"
              :isCc="true"
              :readonly="readonly"
              :approverList="approvalData.ccPeopleList"
              @handleChooseapprover="handleChooseCCApprover"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6" :offset="18" v-if="!readonly && !isAudit">
          <el-button @click="onCancel">取 消</el-button>
          <el-button type="primary" @click="handleClickAddApproval">
            确 定
          </el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- 审批的表单 -->
    <el-form
      v-if="isAudit"
      :model="auditForm"
      size="mini"
      label-position="right"
      label-width="110px"
      :rules="auditRules"
      ref="auditForm"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="审批意见：" prop="approvalOpinion">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入审核意见"
              v-model="auditForm.approvalOpinion"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6" :offset="18">
          <el-button
            type="primary"
            size="medium"
            @click="handleClickThroughApproval(1)"
          >
            通过
          </el-button>
          <el-button
            type="danger"
            size="medium"
            plain
            @click="handleClickThroughApproval(2)"
          >
            驳回
          </el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { projectExaminationApprovalTypeArr } from '@/staticDict/static.js';
import { getType } from '@/utils/index';
import approver from '@/views/Projects/components/approver.vue';
import applyBidForm from '@/views/Commercial/opportunitiesApproval/forms/applyBidForm.vue';
import applyCarForm from '@/views/newOaForm/applyCarForm.vue';
import applySealForm from '@/views/newOaForm/applySealForm.vue';
import applyContractSealForm from '@/views/newOaForm/applyContractSealForm.vue';
import applyQualificationSealForm from '@/views/newOaForm/applyQualificationSealForm.vue';
import applyPrivateCarForm from '@/views/newOaForm/applyPrivateCarForm.vue';

export default {
  props: {
    // 信息
    detailData: {
      type: Object,
      default: () => { }
    },
    // 审批详情数据
    approvalDetail: {
      type: Object,
      default: () => { }
    },
    // 查看详情为只读
    readonly: {
      type: Boolean,
      default: false
    },
    // 是否为审批
    isAudit: {
      type: Boolean,
      default: false
    },
    // 是否为重新提交
    isAgain: {
      type: Boolean,
      default: false
    },
    // 回调函数
    callback: {
      type: Function,
      default: () => { }
    }
  },
  data () {
    return {
      // 审批信息
      approvalData: {
        examinationApprovalType: 1
      },
      curExaminationApprovalType: {},
      // 审核的表单
      auditForm: {},
      // form表单验证规则
      rules: {
        bidType: [
          { required: true, message: '请选择投标方式', trigger: 'change' }
        ],
        approvalApprovaer: [
          { required: true, message: '请选择审批人', trigger: 'change' }
        ]
        // ccPeopleList: [
        //   { required: true, message: '请选择抄送人', trigger: 'change' }
        // ]
      },
      // 审核表单校验
      auditRules: {
        approvalOpinion: [
          { required: true, message: '请输入审核意见', trigger: 'blur' }
        ]
      }
    };
  },
  computed: {
    // 审批类型集合
    examinationApprovalTypeArr () {
      return projectExaminationApprovalTypeArr.filter(v => v.show);
    },
    // 子表单数据
    childFormData () {
      let formKey = this.curExaminationApprovalType.formKey;
      return this.approvalData[formKey] || {};
    }
  },
  components: {
    approver,
    applyBidForm,
    applyCarForm,
    applySealForm,
    applyContractSealForm,
    applyQualificationSealForm,
    applyPrivateCarForm
  },
  created () {
    this.init();
  },
  methods: {
    init () {
      if (this.approvalDetail) {
        this.$set(this, 'approvalData', this.approvalDetail);
        let ccPeopleList = (this.approvalDetail.ccpeopleVos || []).map(v => {
          v.showName = v.userName;
          return v;
        });
        this.$set(this.approvalData, 'ccPeopleList', ccPeopleList);
      };
      this.selectExaminationApprovalType(projectExaminationApprovalTypeArr[this.approvalData.examinationApprovalType - 1]);
    },
    // 商机审批的审核按钮 state 1:通过; 2:驳回
    async handleClickThroughApproval (state) {
      this.auditRules.approvalOpinion[0].required = state === 2
      let valid = await this.$refs['auditForm'].validate();
      if (!valid) {
        return false;
      };
      let params = {
        ...this.auditForm,
        state: state
      };
      if (!getType(this.callback).isFunction) {
        this.onCancel(true);
        return false;
      }
      this.callback(params, () => {
        this.onCancel(true, true);
      });
    },
    // 添加审批
    async handleClickAddApproval () {
      if (this.readonly) {
        return false;
      }
      let formData = await this.$refs['form'].getFormData();
      let valid = await this.$refs['approvalForm'].validate();
      if (!valid) {
        return false;
      }
      this.approvalData.ccPeopleList = (this.approvalData.ccPeopleList || []).map(v => {
        return v.userId ? v.userId : v;
      });
      let params = {
        ...this.approvalData,
        [this.curExaminationApprovalType.formKey]: formData
      };
      if (!getType(this.callback).isFunction) {
        this.onCancel(true);
        return false;
      }
      this.callback(params, () => {
        this.onCancel(true, true);
      });
    },
    // 审批类型change
    selectExaminationApprovalType (item) {
      this.$set(this, 'curExaminationApprovalType', item);
    },
    // 商机审批人选择
    handleChooseOpportunitiesApprover (data) {
      this.$set(this.approvalData, 'approvalApprovaer', data);
    },
    // 抄送人选择
    handleChooseCCApprover (data) {
      // 提交时再处理userId
      this.$set(this.approvalData, 'ccPeopleList', data);
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
    },
    onCancel (isSuccess, data) {
      if (this.observer != null) {
        this.observer.cancel(isSuccess, data);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.approval {
  .clue-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20px;
    margin-bottom: 10px;
  }
  .clue-form {
    .clue-title {
      font-size: 16px;
    }
  }
}
</style>
